<template>
  <div class="personal-content">
    <!-- 下面用户信息 -->
    <div class="personal-info">
      <!-- 背景 -->
      <div class="personal-background"></div>
      <!-- 头像上面 -->
      <div class="user-info-top">
        <div class="info-top animate__animated animate__bounce" >
          <!-- 头像 -->
          <div class="user-profile-head-info-ll">
            <div class="user-profile-avatar">
              
              <img
                :src="userArticleAndCommentInfo.userImg"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- 旁边信息 -->
        <div class="user-info-right">
          <!-- 用户昵称 -->
          <div class="user-nickname animate__animated animate__bounce">
            <div class="user-profile-head-name" data-v-d1dbb6f8="">
              <div class="name">{{userArticleAndCommentInfo.userName}}</div>
            </div>
          </div>
          <!-- 用户博文信息 -->
          <div class="user-article-info">
            <div>
              <ul class="user-info-ul">
                <li class="user-info-li" v-if="userArticleAndCommentInfo.articleNum!=0">发布文章<span>{{userArticleAndCommentInfo.articleNum}}</span>篇</li>
                <li class="user-info-li"  v-else><span style="    font-weight: 500;
    font-size: 15px;
    color: color: rgb(85, 86, 102);
    color: rgb(85, 86, 102);
    position: relative;
    top: 4px;">您尚未发布文章发布文章</span></li>
                <li class="user-info-li-i">|</li>
                <li class="user-info-li" v-if="userArticleAndCommentInfo.commentNum!=0">评论条数<span>{{userArticleAndCommentInfo.commentNum}}</span>条</li>
                 <li class="user-info-li"  v-else><span style="    font-weight: 500;
    font-size: 15px;
    color: color: rgb(85, 86, 102);
    color: rgb(85, 86, 102);
    position: relative;
    top: 4px;">您尚未发表评论</span></li>
              </ul>
            </div>
          </div>
          <div class="signatrue">
            <span style="    margin-right: 10px;">
              <Svgs ids="#icon-gexingqianming"></Svgs>
            </span>
             <span v-if="userArticleAndCommentInfo.userSignature==null" style="    color: rgb(85, 86, 102);
    font-size: 13px;">
               该用户很懒，什么都没写...
             </span>
               <span v-else style="    color: rgb(85, 86, 102);
    font-size: 13px;">
              {{userArticleAndCommentInfo.userSignature}}
             </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 下面信息内容 -->
    <div class="content-user">
      <!-- 左边信息 -->
      <div class="content-left-info">
        <div class="left-el">
          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="iconfont icon-jibenxinxi"></i>
                <span slot="title">我的信息</span>
              </template>
              <el-menu-item-group>
                <span slot="title">信息功能</span>
                <router-link to="/personal/infoCompletion"><el-menu-item index="1-1">信息补全</el-menu-item></router-link>
                <router-link to="/personal/changePassword"><el-menu-item index="1-2">密码修改</el-menu-item></router-link>
                <router-link to="/personal/personalSignature"><el-menu-item index="1-3">个性签名</el-menu-item></router-link>
                <router-link to="/personal/myHead"><el-menu-item index="1-4">头像修改</el-menu-item></router-link>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="iconfont icon-neirongzixun-"></i>
                <span slot="title">我的内容</span>
              </template>
              <el-menu-item-group>
                <span slot="title">我的内容</span>
                <el-submenu index="1-4">
                  <span slot="title">我的文章</span>
                   <router-link to="/personal/articlemanagement"><el-menu-item index="1-4-1">文章列表</el-menu-item></router-link>
                   <router-link to="/personal/writeAnArticle"><el-menu-item index="1-4-2">投稿文章</el-menu-item></router-link>
                </el-submenu>
                 <el-submenu index="1-5">
                  <span slot="title">我的评论</span>
                  <router-link to="/personal/commentList"> <el-menu-item index="1-4-1">评论列表</el-menu-item></router-link>
                </el-submenu>
              </el-menu-item-group>
            </el-submenu>
                <el-submenu index="3">
              <template slot="title">
                <i class="iconfont icon-shoucang1"></i>
                <span slot="title">我的收藏</span>
              </template>
              <el-menu-item-group>
                <span slot="title">我的收藏</span>
                <el-menu-item index="1-1">收藏查看</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
      </div>
      <!-- 右边信息 -->
      <div class="content-right-info">
        <!-- <InfoComplation></InfoComplation> -->
        <!-- <ChangePassword></ChangePassword> -->
        <!-- <PersonalSignature></PersonalSignature> -->
        <!-- <MyHeader></MyHeader> -->
        <!-- <PersonalCenter></PersonalCenter> -->
        <router-view name="personal"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import InfoComplation from "@/components/personalInformation/infoCompletion.vue"
import ChangePassword from "@/components/personalInformation/changePassword.vue"
import PersonalSignature from "@/components/personalInformation/personalSignature.vue"
import MyHeader from "@/components/personalInformation/myHead.vue"
import PersonalCenter from "@/components/personalInformation/personalcenter.vue"
import Ranking from '../ranking/ranking.vue'
import axios from "axios"
import Svgs from "@/components/svg/svg.vue"
export default {
  name: "PersonalInformation",

  components:{
    InfoComplation,
    ChangePassword,
    PersonalSignature,
    MyHeader,
    PersonalCenter,
    Ranking,
    Svgs
  },
  data() {
    return {
      isCollapse: true,
      userArticleAndCommentInfo:null,
      userId:this.$store.state.user
    };
  },
    mounted(){
      this.selectUserArticleAndCommentInfo()
    },
  methods: {
    //获取用户的博文和评论数量
    selectUserArticleAndCommentInfo(){
        if(this.userId == 0 || this.userId == null){
            this.open4("网址数据加载异常")
        }else{
          const that = this;
          axios({
            method:"post",
            url:"/aabbcc/user/selectUserArtAndCommInfo/"+that.userId
          })
          .then(function(res){
              if(res.data.code == 200){
                that.userArticleAndCommentInfo = res.data.obj
              }
          })

        }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
     open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
a{
  color: #333;
}
/* 下面信息内容 */
.content-user {
  width: 78.5%;
  margin: 0 auto;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.content-left-info {
  width: 22%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 0px #ccc;
}
.left-el {
  width: 85%;
  margin: 0 auto;
  margin-top: 15px;
  padding-bottom: 15px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 305px;
  /* min-height: 800px; */
}
.content-right-info {
  width: 76.4%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 15px 0px #ccc;
  margin-bottom: 70px;
}
.left-el .iconfont {
  padding-right: 10px;
  color: #2882c5;
  font-size: 18px;
}

.personal-content {
  width: 100%;
  /* height: 200px; */
  position: relative;
  margin-top: 55px;
}
.personal-background {
  width: 100%;
  height: 200px;
  top: 0;
  background-image: url("@/assets/background.png");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  border-radius: 10px 10px 0 0;
}
.personal-info {
  width: 78.5%;

  margin-top: 20px;
  margin: 0 auto;
  margin-top: 70px;
  /* top: 20px; */
  background: #fff;
  border-radius: 10px;
  padding-bottom: 20px;
  box-shadow: 0px 0px 15px 0px #ccc;
}
/* 头像上面 */
.user-info-top {
  width: 97%;
  height: 95px;
  margin: 0 auto;
  display: flex;
}
.user-profile-head-info-ll {
  position: relative;
  width: 102px;
  height: 90px;
}
.user-profile-avatar {
  position: absolute;
  top: -12px;
  width: 102px;
  height: 102px;
  border: 4px solid #f0f0f2;
  border-radius: 50%;
  background: #fff;
}
.user-profile-avatar > img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
/* 右边信息 */
.user-info-right {
  width: 80%;
  height: 90px;
  margin-left: 15px;
}
.user-nickname {
  width: 100%;
  height: 30%;
  margin-top: 10px;
}
.name {
  font-weight: 600;
  font-size: 20px;
}
.user-article-info {
  width: 100%;
  height: 50%;
  margin-top: 10px;
  color: rgb(85, 86, 102);
}
.user-info-ul .user-info-li span {
  color: black;
  padding: 0 2px 0 2px;
  font-size: 20px;
  font-weight: 600;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.user-info-ul li {
  float: left;
  margin-left: 10px;
}
.user-info-ul li:nth-child(1) {
  margin: 0;
}
.user-info-ul .user-info-li-i {
  color: #f0f0f2;
  margin-top: 5px;
}
.user-info-ul::after {
  content: " ";
  display: block;
  clear: both;
}
.signatrue{
    width: 100%;
    margin-top: -10px;
    overflow: hidden;
        text-overflow: ellipsis;
    white-space: nowrap;
}
</style>